<template>
  <div style="height: 100%;width: 100%">
    <div id="header" style="height: 50px;">
      <div id="search">
        <van-search v-model="value" placeholder="我想搜索" @focus="showSearch"/>
      </div>
    </div>
    <div id="main">
      <div id="tab">
        <van-tabs v-model:active="active" swipeable sticky color="#57c3c2">
          <div class="small-box"></div>
          <van-tab title="推荐">
            <van-pull-refresh
                v-model="isLoading"
                success-text="刷新成功"
                @refresh="onRefresh"
            >
              <user-dynamic-list :post-list="postList" @send-data="handleData"></user-dynamic-list>
            </van-pull-refresh>
          </van-tab>
          <van-tab title="学习">
            <van-pull-refresh
                v-model="isLoading"
                success-text="刷新成功"
                @refresh="onRefresh"
            >
              <user-dynamic-list :post-list="postList" type="学习" @send-data="handleData"></user-dynamic-list>
            </van-pull-refresh>
          </van-tab>
          <van-tab title="游戏">
            <van-pull-refresh
                v-model="isLoading"
                success-text="刷新成功"
                @refresh="onRefresh"
            >
              <user-dynamic-list :post-list="postList" type="游戏" @send-data="handleData"></user-dynamic-list>
            </van-pull-refresh>
          </van-tab>
          <van-tab title="生活">
            <van-pull-refresh
                v-model="isLoading"
                success-text="刷新成功"
                @refresh="onRefresh"
            >
              <user-dynamic-list :post-list="postList" type="生活" @send-data="handleData"></user-dynamic-list>
            </van-pull-refresh>
          </van-tab>
          <van-tab title="娱乐">
            <van-pull-refresh
                v-model="isLoading"
                success-text="刷新成功"
                @refresh="onRefresh"
            >
            </van-pull-refresh>
            <user-dynamic-list :post-list="postList" type="娱乐"></user-dynamic-list>
          </van-tab>
        </van-tabs>
      </div>
      <van-button class="add-button" type="primary" icon="plus" @click="doAddTeam"/>
    </div>
    <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
    />
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import UserDynamicList from "../components/UserDynamicList.vue";
import {getCurrentUser} from "../services/user";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import {useRouter} from "vue-router";

const router = useRouter();

const value = ref('')
const active = ref(0)
const postList = ref()

const showShare = ref(false)

const count = ref(0);
const isLoading = ref(false);

const showSearch = () => {
  router.push('/search')
};

const options = [
  [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
  ],
  [
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
    { name: '小程序码', icon: 'weapp-qrcode' },
  ],
];
onMounted(async () => {
  await getCurrentUser();
  postList.value = await myAxios.post('/post/list/page/vo', {
    pageSize: 10,
    current: 1
  })
  postList.value.data.records.map(item => {
    item.photos = JSON.parse(item.photos)
  })
})

const onRefresh = () => {
  setTimeout(() => {
    Toast('刷新成功');
    isLoading.value = false;
    count.value++;
  }, 1000);
};

const doAddTeam = () => {
  router.push('/social/write')
}

const handleData = (data: boolean) => {
  showShare.value = data;
}

</script>

<style scoped>

.add-button {
  position: fixed;
  bottom: 60px;
  width: 50px;
  height: 50px;
  right: 43%;
  border-radius: 50%;
  background-color: black;
}

</style>